<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>海量阅读 - 登录注册</title>


  <!-- 引入Bootstrap CSS -->
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
  <!-- 引入Font Awesome图标 -->
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">

  <style>
    body {
      font-family: "Microsoft YaHei", Georgia, serif;
      background-color: #f5f3e6; /* 纸张色背景 */
      color: #333;
      line-height: 1.8;
    }

    /* 导航栏样式 */
    .navbar {
      background-color: #79bcff;
    }

    .navbar-brand, .nav-link {
      color: rgb(40, 40, 40) !important;
      /* 加粗 */
      font-weight: bold;
    }

    .nav-link:hover {
      color: #3c8dff !important;
    }

    .footer {
      background-color: hsl(216, 100%, 96%);
      color: #424242;
      padding: 3rem 0;
      margin-top: 3rem;
    }
    /* 登录注册弹窗样式 */
    .auth-modal {
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background-color: rgba(0, 0, 0, 0.5);
      display: flex;
      align-items: center;
      justify-content: center;
      z-index: 1050;
      opacity: 0;
      visibility: hidden;
      transition: all 0.3s ease;
    }

    .auth-modal.active {
      opacity: 1;
      visibility: visible;
    }

    .auth-container {
      display: flex;
      width: 900px;
      height: 650px;
      background-color: #fff;
      box-shadow: 0 0 20px rgba(0, 0, 0, 0.15);
      overflow: hidden;
      transform: translateY(20px);
      transition: transform 0.3s ease;
    }

    .auth-modal.active .auth-container {
      transform: translateY(0);
    }

    .left-panel {
      width: 40%;
      background-color: #007bff;
      color: #fff;
      padding: 40px 30px;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      text-align: center;
    }

    .left-panel h2 {
      font-size: 28px;
      margin-bottom: 20px;
      font-weight: 600;
    }

    .left-panel p {
      font-size: 16px;
      line-height: 1.6;
      margin-bottom: 30px;
    }

    .left-panel img {
      width: 100%;
      border-radius: 4px;
      margin-bottom: 30px;
      box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
    }

    .left-panel .slogan {
      font-size: 14px;
      opacity: 0.9;
      margin-top: auto;
    }

    .right-panel {
      width: 60%;
      padding: 50px 60px;
      position: relative;
    }

    .close-btn {
      position: absolute;
      top: 20px;
      right: 20px;
      font-size: 24px;
      color: #999;
      background: none;
      border: none;
      cursor: pointer;
      transition: color 0.3s;
    }

    .close-btn:hover {
      color: #333;
    }

    .tab-header {
      display: flex;
      margin-bottom: 35px;
      border-bottom: 1px solid #eaecef;
      padding-bottom: 5px;
    }

    .tab-btn {
      padding: 8px 15px;
      font-size: 16px;
      border: none;
      background: none;
      cursor: pointer;
      color: #666;
      position: relative;
      transition: all 0.3s;
    }

    .tab-btn.active {
      color: #007bff;
    }

    .tab-btn.active::after {
      content: '';
      position: absolute;
      bottom: -6px;
      left: 0;
      width: 100%;
      height: 2px;
      background-color: #007bff;
    }

    .tab-content {
      display: none;
    }

    .tab-content.active {
      display: block;
      animation: fadeIn 0.5s;
    }

    @keyframes fadeIn {
      from { opacity: 0; transform: translateY(10px); }
      to { opacity: 1; transform: translateY(0); }
    }

    .form-title {
      font-size: 22px;
      color: #333;
      margin-bottom: 30px;
      font-weight: 600;
    }

    .form-group {
      margin-bottom: 22px;
    }

    .form-group label {
      display: block;
      font-size: 14px;
      color: #333;
      margin-bottom: 8px;
    }

    .form-control {
      width: 100%;
      padding: 12px 15px;
      border: 1px solid #ddd;
      border-radius: 4px;
      font-size: 14px;
      transition: border-color 0.3s, box-shadow 0.3s;
    }

    .form-control:focus {
      border-color: #007bff;
      outline: none;
      box-shadow: 0 0 0 3px rgba(0, 123, 255, 0.1);
    }

    .remember-forgot {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin: 15px 0 30px;
      font-size: 14px;
    }

    .remember-forgot label {
      color: #666;
      display: flex;
      align-items: center;
      cursor: pointer;
    }

    .remember-forgot input {
      margin-right: 6px;
    }

    .remember-forgot a {
      color: #007bff;
      text-decoration: none;
    }

    .remember-forgot a:hover {
      text-decoration: underline;
    }

    .btn-submit {
      width: 100%;
      padding: 13px;
      background-color: #007bff;
      color: #fff;
      border: none;
      border-radius: 4px;
      font-size: 16px;
      font-weight: 500;
      cursor: pointer;
      transition: background-color 0.3s, transform 0.2s;
    }

    .btn-submit:hover {
      background-color: #0056b3;
      transform: translateY(-1px);
    }

    .other-login {
      margin-top: 30px;
      text-align: center;
      color: #666;
      font-size: 14px;
    }

    .social-icons {
      display: flex;
      justify-content: center;
      margin-top: 15px;
      gap: 20px;
    }

    .social-icons i {
      font-size: 22px;
      color: #666;
      cursor: pointer;
      transition: color 0.3s, transform 0.2s;
    }

    .social-icons i:hover {
      color: #007bff;
      transform: scale(1.1);
    }

    .register-agree {
      margin: 15px 0 30px;
      font-size: 13px;
      color: #666;
    }

    .register-agree label {
      display: flex;
      align-items: center;
      cursor: pointer;
    }

    .register-agree input {
      margin-right: 6px;
    }

    .register-agree a {
      color: #007bff;
      text-decoration: none;
    }

    .register-agree a:hover {
      text-decoration: underline;
    }
    /* 调整登录注册页面为更小尺寸 */
    .auth-page-container {
      min-height: calc(100vh - 100px);
      display: flex;
      align-items: center;
      padding: 30px 0;
    }

    .auth-modal {
      position: static;
      opacity: 1;
      visibility: visible;
      background-color: transparent;
      padding: 15px 0;
    }

    .auth-container {
      transform: translateY(0);
      width: 100%;
      max-width: 760px; /* 缩小容器宽度 */
      height: auto;
      min-height: 520px; /* 降低最小高度 */
      box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
      border-radius: 12px;
      overflow: hidden;
      display: flex;
    }

    /* 左侧面板调整 */
    .left-panel {
      flex: 0 0 40%;
      background-color: #f8f9fa;
      padding: 30px 25px;
      display: flex;
      flex-direction: column;
      justify-content: center;
    }

    .left-panel h2 {
      font-size: 1.6rem;
      margin-bottom: 15px;
      color: #082a7b;
    }

    .left-panel p {
      font-size: 0.95rem;
      margin-bottom: 25px;
      color: #555;
    }

    .left-panel img {
      width: 100%;
      max-width: 200px;
      margin: 0 auto 20px;
      border-radius: 8px;
      box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
    }

    .slogan {
      text-align: center;
      font-size: 0.9rem;
      color: #082a7b;
      font-weight: 500;
      margin-top: auto;
    }

    /* 右侧表单面板调整 */
    .right-panel {
      flex: 0 0 60%;
      padding: 30px 30px;
    }

    .tab-header {
      display: flex;
      margin-bottom: 25px;
      gap: 5px;
    }

    .tab-btn {
      flex: 1;
      padding: 8px 0;
      background: none;
      border: none;
      font-size: 1rem;
      font-weight: 500;
      color: #666;
      cursor: pointer;
      position: relative;
      transition: all 0.3s ease;
    }

    .tab-btn.active {
      color: #082a7b;
    }

    .tab-btn.active::after {
      content: '';
      position: absolute;
      bottom: 0;
      left: 0;
      width: 100%;
      height: 2px;
      background-color: #082a7b;
    }

    .form-title {
      font-size: 1.4rem;
      margin-bottom: 20px;
      color: #333;
      font-weight: 600;
    }

    .form-group {
      margin-bottom: 18px;
    }

    .form-group label {
      display: block;
      margin-bottom: 6px;
      font-size: 0.9rem;
      color: #555;
    }

    .form-control {
      width: 100%;
      padding: 10px 12px;
      border: 1px solid #ddd;
      border-radius: 6px;
      font-size: 0.9rem;
      transition: border-color 0.3s ease;
    }

    .form-control:focus {
      outline: none;
      border-color: #082a7b;
      box-shadow: 0 0 0 2px rgba(8, 42, 123, 0.1);
    }

    .remember-forgot {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin: 10px 0 20px;
      font-size: 0.85rem;
    }

    .remember-forgot a {
      color: #082a7b;
      text-decoration: none;
    }

    .remember-forgot a:hover {
      text-decoration: underline;
    }

    .register-agree {
      margin: 10px 0 20px;
      font-size: 0.85rem;
      color: #666;
    }

    .btn-submit {
      width: 100%;
      padding: 10px;
      background-color: #082a7b;
      color: white;
      border: none;
      border-radius: 6px;
      font-size: 0.95rem;
      font-weight: 500;
      cursor: pointer;
      transition: background-color 0.3s ease;
      margin-bottom: 20px;
    }

    .btn-submit:hover {
      background-color: #0a349c;
    }

    .other-login {
      text-align: center;
      font-size: 0.85rem;
      color: #666;
    }

    .social-icons {
      display: flex;
      justify-content: center;
      gap: 15px;
      margin-top: 12px;
    }

    .social-icons i {
      font-size: 1.3rem;
      color: #082a7b;
      cursor: pointer;
      transition: transform 0.3s ease;
    }

    .social-icons i:hover {
      transform: translateY(-3px);
    }

    .tab-content {
      display: none;
    }

    .tab-content.active {
      display: block;
      animation: fadeIn 0.4s ease;
    }

    @keyframes fadeIn {
      from { opacity: 0; transform: translateY(10px); }
      to { opacity: 1; transform: translateY(0); }
    }

    /* 响应式调整 */
    @media (max-width: 768px) {
      .auth-container {
        flex-direction: column;
        max-width: 90%;
        min-height: auto;
      }

      .left-panel, .right-panel {
        width: 100%;
        flex: none;
      }

      .left-panel {
        padding: 25px 20px;
        text-align: center;
      }

      .right-panel {
        padding: 25px 20px;
      }

      .left-panel h2 {
        font-size: 1.4rem;
      }

      .form-title {
        font-size: 1.25rem;
      }
    }
  </style>
</head>
<body>
<!-- 导航栏 -->
<nav class="navbar navbar-expand-lg">
  <div class="container">
    <a class="navbar-brand" href="index.html">
      <i class="fas fa-book-reader me-2"></i>海量阅读
    </a>
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarNav">
      <ul class="navbar-nav ms-auto">
        <li class="nav-item">
          <a class="nav-link" href="index.html">首页</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="check.html">搜索筛选</a>
        </li>
        <li class="nav-item">
          <a class="nav-link " href="login.html">登录注册</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="personal.html">个人中心</a>
        </li>
      </ul>
    </div>
  </div>
</nav>

<!-- 登录注册主内容区 -->
<div class="auth-page-container">
  <div class="container">
    <!-- 登录注册区域 -->
    <div class="auth-modal active" id="authModal">
      <div class="auth-container">
        <div class="left-panel">
          <h2>欢迎来到海量阅读</h2>
          <p>发现更多精彩书籍，开启您的阅读之旅</p>
          <img src="img/dlzc.jpg" alt="打开的书籍">
          <p class="slogan">每天阅读，每天进步</p>
        </div>
        <div class="right-panel">
          <div class="tab-header">
            <button class="tab-btn" data-tab="login">登录</button>
            <button class="tab-btn active" data-tab="register">注册</button>
          </div>

          <!-- 登录表单 -->
          <div class="tab-content" id="login">
            <h3 class="form-title">账号登录</h3>
            <div class="form-group">
              <label for="loginUsername">用户名</label>
              <input type="text" id="loginUsername" class="form-control" placeholder="请输入用户名">
            </div>
            <div class="form-group">
              <label for="loginPassword">密码</label>
              <input type="password" id="loginPassword" class="form-control" placeholder="请输入密码">
            </div>
            <div class="remember-forgot">
              <label><input type="checkbox"> 记住我</label>
              <a href="#">忘记密码？</a>
            </div>
            <button class="btn-submit">登录</button>
            <div class="other-login">
              或使用以下方式登录
              <div class="social-icons">
                <i class="fab fa-weixin"></i>
                <i class="fab fa-qq"></i>
                <i class="fab fa-weibo"></i>
              </div>
            </div>
          </div>

          <!-- 注册表单 -->
          <div class="tab-content active" id="register">
            <h3 class="form-title">账号注册</h3>
            <div class="form-group">
              <label for="regUsername">用户名</label>
              <input type="text" id="regUsername" class="form-control" placeholder="请输入用户名">
            </div>
            <div class="form-group">
              <label for="regEmail">邮箱</label>
              <input type="email" id="regEmail" class="form-control" placeholder="请输入邮箱">
            </div>
            <div class="form-group">
              <label for="regPassword">密码</label>
              <input type="password" id="regPassword" class="form-control" placeholder="请设置密码">
            </div>
            <div class="form-group">
              <label for="regConfirmPassword">确认密码</label>
              <input type="password" id="regConfirmPassword" class="form-control" placeholder="请再次输入密码">
            </div>
            <div class="register-agree">
              <label><input type="checkbox"> 我同意用户协议和隐私政策</label>
            </div>
            <button class="btn-submit">注册</button>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

<!-- 页脚 -->
<footer class="footer">
  <div class="container">
    <div class="row">
      <div class="col-md-4 mb-4">
        <h5 class="text-black mb-4">海量阅读</h5>
        <p>提供海量免费图书资源，让阅读无处不在</p>
      </div>
      <div class="col-md-2 mb-4">
        <h5 class="text-black mb-4">关于我们</h5>
        <ul class="list-unstyled">
          <li class="mb-2"><a href="#" class="text-decoration-none text-muted">关于海量</a></li>
          <li class="mb-2"><a href="#" class="text-decoration-none text-muted">加入我们</a></li>
          <li class="mb-2"><a href="#" class="text-decoration-none text-muted">联系方式</a></li>
        </ul>
      </div>
      <div class="col-md-2 mb-4">
        <h5 class="text-black mb-4">帮助中心</h5>
        <ul class="list-unstyled">
          <li class="mb-2"><a href="#" class="text-decoration-none text-muted">使用帮助</a></li>
          <li class="mb-2"><a href="#" class="text-decoration-none text-muted">常见问题</a></li>
          <li class="mb-2"><a href="#" class="text-decoration-none text-muted">意见反馈</a></li>
        </ul>
      </div>
      <div class="col-md-4 mb-4">
        <h5 class="text-black mb-4">订阅更新</h5>
        <p class="text-muted">订阅我们的 newsletter，获取最新图书资讯</p>
        <div class="input-group">
          <input type="email" class="form-control" placeholder="您的邮箱">
          <button class="btn btn-primary">订阅</button>
        </div>
      </div>
    </div>
    <hr class="my-4 bg-secondary">
    <div class="row align-items-center">
      <div class="col-md-6 text-center text-md-start">
        <p class="text-muted mb-0">© 2025 海量阅读. 保留所有权利</p>
      </div>
      <div class="col-md-6 text-center text-md-end">
        <div class="d-flex justify-content-md-end justify-content-center gap-3">
          <a href="#" class="text-muted"><i class="bi bi-facebook"></i></a>
          <a href="#" class="text-muted"><i class="bi bi-twitter"></i></a>
          <a href="#" class="text-muted"><i class="bi bi-instagram"></i></a>
          <a href="#" class="text-muted"><i class="bi bi-wechat"></i></a>
        </div>
      </div>
    </div>
  </div>
</footer>

<!-- 引入Bootstrap JS -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
<script>
  // 获取DOM元素
  const tabBtns = document.querySelectorAll('.tab-btn');
  const tabContents = document.querySelectorAll('.tab-content');

  // 切换登录/注册表单
  function switchTab(tabId) {
    // 移除所有活跃状态
    tabBtns.forEach(btn => btn.classList.remove('active'));
    tabContents.forEach(content => content.classList.remove('active'));

    // 添加当前活跃状态
    document.querySelector(`.tab-btn[data-tab="${tabId}"]`).classList.add('active');
    document.getElementById(tabId).classList.add('active');
  }

  // 点击选项卡切换表单
  tabBtns.forEach(btn => {
    btn.addEventListener('click', function() {
      const tabId = this.getAttribute('data-tab');
      switchTab(tabId);
    });
  });

  // 登录按钮点击事件
  document.querySelector('#login .btn-submit').addEventListener('click', function() {
    const username = document.getElementById('loginUsername').value;
    const password = document.getElementById('loginPassword').value;

    if (!username || !password) {
      alert('请输入用户名和密码');
      return;
    }
    console.log('登录信息：', { username, password });
    // 这里可以添加实际登录逻辑
  });

  // 注册按钮点击事件
  document.querySelector('#register .btn-submit').addEventListener('click', function() {
    const username = document.getElementById('regUsername').value;
    const email = document.getElementById('regEmail').value;
    const password = document.getElementById('regPassword').value;
    const confirmPassword = document.getElementById('regConfirmPassword').value;
    const agreeTerms = document.querySelector('.register-agree input').checked;

    // 简单验证
    if (!username || !email || !password || !confirmPassword) {
      alert('请填写所有字段');
      return;
    }

    if (password !== confirmPassword) {
      alert('两次输入的密码不一致');
      return;
    }

    if (!agreeTerms) {
      alert('请同意用户协议和隐私政策');
      return;
    }

    console.log('注册信息：', { username, email, password });
    // 这里可以添加实际注册逻辑
  });
</script>
</body>
</html>
